<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Dawn个人介绍</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<style>
		body {
			 width: 100px;
			 height: 100px;
			 background-image: url(img/back.jpg);
			} 
.b{background-color: ghostwhite;
		width: 17%; height: 80%;
		position: fixed;
			  top:10%;
			  left: 4%;}
		.me img{
			width: 150px;
			height: 150px;
			background-color: aliceblue;
			position: fixed;
				  top:15%;
				  left: 7%;
		}
		
	
		.name{
		            font-size: 20px;
		            width: 15%;height: 6%;
		            color: midnightblue;
					background-color: papayawhip;
					text-align: center;
					position: fixed;
						  top:40%;
						  left: 5%;


		           }
		.class{
		            font-size: 20px;
		            width: 15%;height: 6%;
		            color: midnightblue;
		            background-color: papayawhip;
		            text-align: center;
		            position: fixed;
		            	  top:50%;
		            	  left: 5%;
					/* border: 1px solid purple; */

		           }     
		

		.qq{
		            font-size: 20px;
		            width: 15%;height: 6%;
		            color: midnightblue;
		            background-color: papayawhip;
		            text-align: center;
		            position: fixed;
		            	  top:60%;
		            	  left: 5%;
		           }
		.number{
				    font-size: 20px;
				    width: 15%;height: 6%;
				    color: midnightblue;
				    background-color: papayawhip;
				    text-align: center;
				    position: fixed;
				    	  top:70%;
				    	  left: 5%;
				              }
		.one{
				    ont-size: 22px;
				    width: 25%;height: 28%;
				    color: midnightblue;
				    background-color: steelblue;
				    text-align: center;
				    position: fixed;
				    	  top:10%;
				    	  left: 30%;
				              }					  						  
		.two{
				    ont-size: 22px;
				    width: 25%;height: 28%;
				    color: midnightblue;
				    background-color: lightsteelblue;
				    text-align: center;
				    position: fixed;
				    	  top:10%;
				    	  left: 60%;
				              }
		.three{
					ont-size: 22px;
					width: 55%;height: 45%;
					color: midnightblue;
					background-color: gainsboro;
					text-align: center;
					position: fixed;
					top:45%;
					left: 30%;
							  		              }			
		
	</style>
	</head>
	
	<body>
		<div class="b"></div>
		<div class="me"><img src="img/img.jpg"/></div>
		<div class="name">姓名：Dawn</div> 
		<div class="class">班级：计科2011</div>
		<div class="qq">qq：2274560271</div>
	    <div class="number">学号：20104011127</div>  
	    <div class="one"><b>爱好</b>
		     <p>音乐，电影电视，散步，科幻书籍，睡觉，偶尔摆烂，间歇努力，经常偶尔</p>
		    </div>
		<div class="two"><b>推荐一些近期的歌</b>
		     <p><a href="https://music.163.com/#/search/m/?id=31561897&s=%E6%A2%A6%E5%88%B0%E4%BD%A0">梦到你</a>-沙一汀</p>
			 <p><a href="https://music.163.com/#/song?id=1969908030">星空叙爱曲</a>-法老/阿达娃</p>
			 <p><a href="https://music.163.com/#/song?id=1357775302">UFO</a>-99 God</p>
			 <p><a href="https://music.163.com/#/song?id=1891447896">New Tooth</a>-Rich Brian</p>
		     </div>
		<div class="three"><b>一些电影推荐</b>
		     <p><a href="https://movie.douban.com/subject/24404677/">超体</a>---法国科幻动作片</p>
			 <p><a href="https://movie.douban.com/subject/3274505/">猩球崛起123</a>---美国科幻动作剧情</p>
			 <p><a href="https://movie.douban.com/subject/2268359/">暮光之城1234</a>---美国爱情剧情</p>
			 <p><a href="https://movie.douban.com/subject/1302827/">人工智能</a>---美国剧情科幻</p>
			 <p><a href="https://movie.douban.com/subject/20495023/">寻梦环游记</a>---美国奇幻动画喜剧</p>
		    </div>
	</body>
</html>
